import { Component, OnInit } from '@angular/core';
import {Video} from './video';

import {OnvifWsService} from '../onvif-ws.service';

import videojs from 'video.js';

require('videojs-flash');

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.css']
})
export class VideoComponent implements OnInit {

  video: Video = {
    // src: 'http://www.w3school.com.cn/i/movie.mp4',
    // type: 'video/mp4',
    src: 'rtmp://127.0.0.1:1935/live/',
    type: 'rtmp/flv',
    width: 300,
    height: 500
  };

  // 左侧展板菜单信息
  left_menu = {
    title: '设备信息',
    device_info: '设备信息',
    network_info: '网络配置信息'
  }

  // 播放状态控制
  ControlStatus = {

    // 是否正在播放,默认暂停
    isPlay: false,

    // 是否开启声音， 默认开启
    isSound: true,

    // 是否全屏， 默认不是
    isFullScreen: false,

    // 默认音量取系统音量大小
    volume: 0,

    // 菜单工具描述文本
    tools: {
      sound: {
        on: '开启声音',
        off: '关闭声音'
      },
      play: {
        on: '播放',
        off: '暂停'
      },
      screen: {
        on: '全屏',
        off: '退出全屏'
      }
    }
  }

  player: videojs.Player;

  constructor(private onvifWsService: OnvifWsService) {}

  ngOnInit() {
    this.initVideo(this);
  }

  initVideo(_this: VideoComponent): void {
    this.player = videojs('test_video', {
      // 禁用默认控制条
      controls: false
    });

    this.player.ready( function () {

      this.src({ type: _this.video.type, src: _this.video.src });
      this.play();
    });


    /**
     * 监听视频播放完毕状态
     * 视频播放完毕更新播放状态
     */
    this.player.on('ended', function () {

      _this.ControlStatus.isPlay = false;
    });
  }

  /**
   * 更改播放状态
   */
  changePlayStatus(): void {

    if (this.ControlStatus.isPlay) {
      this.player.pause();
      this.ControlStatus.isPlay = false;
    } else {
      this.player.play();
      this.ControlStatus.isPlay = true;
    }
  }

  /**
   * 更改播放声音状态
   */
  changeSoundStatus(): void {

    if (this.ControlStatus.isSound) {
      // 先记录下原视频音量大小，缓存起来
      const volume = this.player.volume();
      this.ControlStatus.volume = volume;

      this.player.volume(0);
      this.ControlStatus.isSound = false;
    } else {

      // 使用缓存音量恢复声音
      this.player.volume(this.ControlStatus.volume);
      this.ControlStatus.isSound = true;
    }
  }

  /**
   * 更改全屏状态
   */
  changeFullScreenStatus(): void {

    if (this.ControlStatus.isFullScreen) {
      this.ControlStatus.isFullScreen = false;
    } else {
      this.ControlStatus.isFullScreen = true;
    }
  }

  // 切换展板信息
  changeBoard(title: string): void {
    this.left_menu.title = title;
  }
}

